<template>
  <div ref="myDiv" class="huangxing-echart" />
</template>

<script>
var echarts = require('echarts');
export default {
  name: 'HuanXing',
  data() {
    return {

    };
  },
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv);
    var option = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '5%',
        left: 'center',
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: '家用电器' },
            { value: 735, name: '食用酒水' },
            { value: 580, name: '个护健康' },
            { value: 484, name: '服饰箱包' },
            { value: 300, name: '母婴产品' },
            { value: 300, name: '其他' },
          ],
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
.huangxing-echart{
    width: 600px;
    height:400px;
}
</style>
